<template>
  <!-- <router-link id="news" :to="{path: '/newParticulars', params: {} }"> -->
  <a id="news" :href="congestio.url" class="newsCn">
    <div class="newsLis">
      <div class="newsLis_lf"><img :src="congestio.imgurl"></div>
      <div class="newsLis_rt">
        <p class="newsLis_rt_head">{{congestio.title}}</p>
        <p class="newsLis_rt_body">{{congestio.title}}</p>
        <!--<p class="right-footer">
          <span>央视新闻</span>
          <span class="pt"><b class="tip">阅读:</b> <b>80000</b></span>
        </p>-->
      </div>
    </div>
  </a>
  <!-- </router-link> -->
</template>

<script>
export default {
  name: 'news-list',
  props: ['congestio'],
  data () {
    return {
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
/*@import "../../../styles/baseVar.less";*/
  .newsCn{
    padding: .75rem;
    display: block;
    border-bottom: 1px solid #f4f4f4;
    font-family: 'PingFang SC';
    .newsLis{
      position: relative;
      height: 4.7rem;
      .newsLis_lf{
        position: absolute;
        left: 0;
        top:0;
        width: 6.7rem;
        height: 4.7rem;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .newsLis_rt{
        height: 4.7rem;
        position: absolute;
        left: 7.45rem;
        right: 0;
        p{
          color: #000;
          font-size: 0.85rem;
          line-height: 1.3;
        }
        p.newsLis_rt_body,p.newsLis_rt_head{
          display: -webkit-box;
          -webkit-line-clamp: 2;
          overflow: hidden;
          height: auto;
          -webkit-line-break: auto;
          -webkit-box-orient: vertical;
        }
        p.newsLis_rt_body{
          color: #999;
          font-size: 0.65rem;
          margin-top: 0.2rem;
          position: absolute;
          bottom: 0;
        }
        p.right-footer{
          color: #999;
          font-size: 0.6rem;
          position: absolute;
          bottom: 0;
          span{
            b{
              font-weight: 300;
            }
            b:nth-child(1){
              color: #000;
            }
          }
          span:nth-child(1){
            margin-right: 1.5rem;
          }
        }
      }
    }
  }
  .newsCn:last-child{
    border-bottom: 0;
  }
</style>
